import 'package:flutter/material.dart';

class FramesAnimations extends StatefulWidget {
  const FramesAnimations({
    super.key, // 记录组件状态
    this.initIndex = 0,
    required this.images,
  }); // 通过 super 将 key 传递给 StatefulWidget 组件

  /// 当前帧动画索引 使用 final 关键字由组件外传递, 外部传递什么就是什么, 组件内部不对其做修改
  final int initIndex;

  /// 帧动画图片
  final List images;

  @override
  State<FramesAnimations> createState() => FramesAnimationsState();
}

class FramesAnimationsState extends State<FramesAnimations> with SingleTickerProviderStateMixin {
  /// 动画控制器
  late AnimationController _animationController;

  /// 动画对象
  late Animation _animation;

  @override
  void initState() {
    // 创建动画控制器
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 400),
    );

    // 创建动画对象 注: 动画对象创建完成之后需要绑定动画控制器
    _animation = Tween(begin: 0.0, end: (widget.images.length - 1).toDouble()).animate(_animationController);

    // 监听动画刷新: Flutter 的动画每一秒刷新60次(帧)左右
    _animationController.addListener(() {
      // 如果监听到动画刷新, 就刷新当前组件一次
      setState(() {});
    });
    // 默认启动首页动画
    if (widget.initIndex == 0) {
      startAnimation();
    }
    super.initState();
  }

  @override
  void dispose() {
    // 释放动画资源
    _animationController.dispose();
    super.dispose();
  }

  /// 启动动画
  void startAnimation() => _animationController.forward();

  /// 重置动画方法
  void resetAnimation() => _animationController.reset();

  /// 准备七个色块用于测试
  List frames = <Widget>[
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.red,
    ),
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.orange,
    ),
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.yellow,
    ),
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.green,
    ),
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.teal,
    ),
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.blue,
    ),
    Container(
      width: 20.0,
      height: 20.0,
      color: Colors.purple,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    int framesIndex = _animation.value.floor();

    return Container(
      // 读取并展示帧动画图片
      child: widget.images[framesIndex],
    );
  }
}
